<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Author" content="Fly">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel = "stylesheet" href = "<%=basePath%>css/shou-040.css">
    <title>Title</title>
    <style>

    </style>
    <script type="text/javascript" src="<%=basePath%>js/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/shou.js" ></script>

</head>
<body style="overflow:-Scroll;overflow-y:hidden;">
<div class="head">

</div>
<div class="content">
    <div class="content_left">
        <p class="clp cl1"><a href = "/kss/login/shouye.do">首页</a></p>
        <div class="cld"></div>
        <p class="clp cl2  "><a>实习生信息</a></p>
        <div class="cld cl2_1" style="display:none;">
            <li class="cl_li1 "><a href = "/kss/staff/findAllStaff.do?interviewer=ALL&staff_name=null">基本信息</a></li>
            <li class="cl_li2 "><a href = "/kss/apply/findAllApply.do">请假信息</a></li>
        </div>
        <p class="=clp cl3 "><a>培训信息</a></p>
        <div class="cld cl3_1">

            <li class="cl_li6 " ><a href = "/kss/find/findFirstPhase.do">阶段成绩</a></li>
            <li class="cl_li7 "><a href = "/kss/jieduan/findJieDuan.do">综合查询</a></li>

        </div>
        <p class="clp cl4"><a>特殊人员</a></p>
        <div class="cld cl4_1">
            <li class="cl_li4"><a href = "/kss/eliminate/selEliminate.do">淘汰人员</a></li>
            <li class="cl_li5"><a href = "/kss/newCome/getNew.do">新增人员</a></li>
        </div>
        <p class="clp cl5  _clp_"><a href = "/kss/staff/echarts.do">综合信息</a></p>
        <div  >

        </div>
    </div>

</div>
<div class="scroll" style="width:1400px;height:800px;position:absolute;top:80px;left:360px;overflow-y:auto;">
	<div id="pie1" style="width:500px;height:500px; position:absolute;top:0;left:0;" ></div>
   	<div id="pie2" style="width:500px;height:500px; position:absolute;top:0;left:620px;"></div>
    <div id="pie3" style="width:500px;height:500px; position:absolute;top:500px;left:0;"></div>
    <div id="pie4" style="width:500px;height:500px; position:absolute;top:500px;left:620px;"></div>
    </div>
</body>

<script type="text/javascript" src="<%=basePath%>echarts/js/echarts.min.js"></script>
   <script type="text/javascript" src="<%=basePath%>echarts/js/esl.js"></script>
  <script type="text/javascript" src="<%=basePath%>echarts/js/jquery.min.js"></script>
 <script type="text/javascript">
 	var chart1=echarts.init(document.getElementById("pie1"));
   	var too=${too};
   	var too2=${too2};
   	option = {
	    title : {
	        text: '211占比',
	        x:'center'
	    },
	    tooltip : {
        formatter: "{a} <br/>{b} : {c} 家"
    	},
	    legend: {
	        orient : 'vertical',
	        x : 'right',
	        data:['211学校','非211学校']
	    },
	      color: ['rgb(255,193,193)','rgb(152,245,255)'],
	    series : [
	        {
	          	name:'占比情况',
	            type:'pie',
	            radius : '40%',
	            center: ['50%', '50%'],
	            data:[
	                {value:too, name:'211学校'},
	                {value:too2-too, name:'非211学校'}
	            ]
	        }
	    ]
	};
chart1.setOption(option);
 </script>
  <script type="text/javascript">
	var chart2=echarts.init(document.getElementById("pie2"));
   	var man=${man};
   	var total=${too2};
   	option = {
	    title : {
	        text: '男女占比',
	        x:'center'
	    },
	    tooltip : {
        formatter: "{a} <br/>{b} : {c} 人"
    	},
	    legend: {
	        orient : 'vertical',
	        x : 'right',
	        data:['男','女']
	    },
	      color: ['rgb(152,245,255)','rgb(255,193,193)'],
	    series : [
	        {
	          	name:'占比情况',
	            type:'pie',
	            radius : '40%',
	            center: ['50%', '50%'],
	            data:[
	                {value:man, name:'男'},
	                {value:total-man, name:'女'}
	            ]
	        }
	    ]
	};
chart2.setOption(option);
   </script>
   <script type="text/javascript">
	var chart3=echarts.init(document.getElementById("pie3"));
   	var taotai=${totalStaffStateIsTOO};
   	var totalStaff=${too2};
   	option = {
	    title : {
	        text: '淘汰人员占比',
	        x:'center'
	    },
	    tooltip : {
        formatter: "{a} <br/>{b} : {c} 人"
    	},
	    legend: {
	        orient : 'vertical',
	        x : 'right',
	        data:['淘汰','通过']
	    },
	      color: ['rgb(255,193,193)','rgb(152,245,255)'],
	    series : [
	        {
	          	name:'占比情况',
	            type:'pie',
	            radius : '40%',
	            center: ['50%', '50%'],
	            data:[
	                {value:taotai, name:'淘汰'},
	                {value:totalStaff-taotai, name:'通过'}
	            ]
	        }
	    ]
	};
chart3.setOption(option);
   </script>
   
    <script type="text/javascript">
	var chart4=echarts.init(document.getElementById("pie4"));
	var a='${department}';
	var c=a.split(',');
	var b=${value};
	 var list = [];
	for(var index=0;index<b.length;index++){
		list.push({name:c[index],value:b[index]})
	}
   	option = {
	    title : {
	        text: '部门接纳人数占比',
	        x:'center'
	    },
	   
	    legend: {
	        orient : 'vertical',
	       	left:'right',
	        data:c
	    },
	     color: ['rgb(255,193,193)','rgb(238,203,173)','rgb(255,246,143)','rgb(139,101,8)','rgb(152,245,255)'],
	    series : [
	        {
	          	name:'占比情况',
	            type:'pie',
	            radius : '40%',
	            center: ['50%', '50%'],
            label: {
                normal: {
                    show: true,
                   
                }
            },
	            data:list
	        }
	    ]
	};
chart4.setOption(option);
   </script>
</html>